<template>
  <div class="recommend-list">
    <div
      class="recommend-item"
      v-for="(item, index) in recommendList"
      :key="index"
      @click="findProduct(item)"
    >
      <img :src="item.imageHost + item.mainImage" alt="" />
      <p>{{ item.name }}</p>
      <i>￥ {{ item.price }}</i>
    </div>
  </div>
</template>

<script>
import { getRecommend } from "../api/api";
export default {
  data() {
    return {
      recommendList: [],
    };
  },
  created() {
    this.recommendInfo();
  },
  methods: {
    recommendInfo() {
      getRecommend((res) => {
        // console.log(res);
        this.recommendList = res.data;
      });
    },
    findProduct(item) {
      this.$router.push({
        name: "Detail",
        params: { id: item.id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
// 推荐组件
.recommend-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 21px;
  padding-bottom: 210px;
  background: #fff;

  .recommend-item {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding: 14px;
    box-sizing: border-box;
    border-bottom: 1px solid #dcdcdc;

    img {
      width: 100%;
      height: 300px;
    }

    p {
      height: 40px;
      line-height: 1;
      padding: 14px 0;
      color: #333;
      overflow: hidden;
      font-size: 14px;
    }

    i {
      font-style: normal;
      color: #f63515;
      font-size: 23px;
    }
  }

  .recommend-item:nth-child(2n-1) {
    border-right: 1px solid #dcdcdc;
  }
}
</style>